<template>
  <div class="app-container">
    <div class="app-title">
      <span>人员变动编辑</span>
    </div>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-col :span="1">
          <i :class="[treeShow ? 'el-icon-s-fold treeI': 'el-icon-s-unfold treeI']" @click="toggerTree" />
        </el-col>
        <div class="tap-fillet">
          <el-radio-group
            v-model="activeName"
            style="margin-left:4rem; width:700px; height:15px; margin-top:-57px"
          >
            <el-radio-button
              label="all"
              name="didNotReport"
            >全部</el-radio-button>
            <el-radio-button
              label="0"
              name="report"
            >未送审</el-radio-button>
            <el-radio-button
              label="1"
              name="didNotReport"
            >已送审</el-radio-button>
            <el-radio-button
              label="-1"
              name="report"
            >被退回</el-radio-button>
          </el-radio-group>
        </div>
      </el-col>
      <!-- 图标 -->
      <div>
        <div style="margin-left:83px; position:absolute; margin-top:7px">
          <img
            style="width:16px; height:16px;"
            :src="allimgSrc"
          >
        </div>

        <div style="margin-left:159px; position:absolute;  margin-top:7px">
          <img
            style="width:16px; height:16px;"
            :src="Untreatedimg"
          >
        </div>

      </div>
      <div style="margin-left:246px; position:absolute;  margin-top:7px">
        <img
          style="width:16px; height:16px;"
          :src="Processedimg"
        >
      </div>
      <div style="margin-left:335px; position:absolute;  margin-top:7px">
        <img
          style="width:16px; height:16px;"
          :src="Backimg"
        >
      </div>
      <div class="filter-container">
        <div>
          <el-col
            style="text-align:right;margin-top: -3px"
            :span="16"
          >
            <el-button
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              @click="Query"
            >
              查 询
            </el-button>
            <el-button
              v-if="activeName == 'all'"
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              @click="exportTemplate"
            >
              模板导出
            </el-button>
            <el-button
              v-if="activeName == 'all'"
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              @click="outPutFile"
            >
              导出
            </el-button>
            <el-button
              v-if="activeName == 'all'"
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              @click="importFile"
            >
              导入
            </el-button>
            <el-button
              v-if="activeName == '0'|| activeName=='all'||activeName == '-1'"
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              @click="handleAdd"
            >
              新增
            </el-button>
            <el-button
              v-if="activeName=='0'|| activeName=='-1'"
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              :loading="verifyLoading"
              @click="submitVerify"
            >
              送审
            </el-button>
            <el-button
              v-if="false"
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              :loading="revokeOutLoading"
              @click="revokeOut"
            >
              撤销调出
            </el-button>
            <el-button
              v-if="false"
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              :loading="revokeInLoading"
              @click="revokeIn"
            >
              撤销调入
            </el-button>
            <el-button
              v-if="false"
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              :loading="revokeReductionLoading"
              @click="revokeInDelete"
            >
              撤销消减
            </el-button>
            <el-button
              v-if="activeName !== '1'"
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              @click="handleEdit"
            >
              修改
            </el-button>
            <el-button
              v-if="false"
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              :loading="revokeEditLoading"
              @click="revokeEdit"
            >
              撤销修改
            </el-button>
            <el-button
              v-if="activeName == 'all'"
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              @click="handleOut"
            >
              调出
            </el-button>
            <el-button
              v-if="activeName == 'all'"
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              :loading="inLoading"
              @click="handleIn"
            >
              调入
            </el-button>
            <el-button
              v-if="activeName === 'all'"
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              @click="handleReduction"
            >
              消减
            </el-button>
            <el-button
              v-if="activeName === '0'||activeName === '-1'"
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              :loading="deleteLoading"
              @click="handleDelete"
            >
              撤销变动
            </el-button>
            <el-button
              v-if="activeName == '1'"
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              :loading="revokeVerifyLoading"
              @click="revokeVerify"
            >
              撤销送审
            </el-button>
            <el-button
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              @click="appendixOpen"
            >
              附件管理
            </el-button>
          </el-col>
        </div>
      </div>
    </el-row>
    <div ref="box" class="box">
      <div class="left" :class="[isActive ? 'wid':'wids']">
        <div :class="[treeShow ? 'treeShow' : 'treeNotShow']" :style="{'height' : treeHeight + 'px'}">
          <AgencyTree class="agencyTree" @handleTreeQuery="handleTreeQuery" @getFirstAuthAgencyData="getFirstAuthAgencyData" />
        </div>
      </div>
      <div v-show="Show" class="resize" title="收缩侧边栏" />
      <div class="mid" :class="[isActive ? 'mids': 'min']">
        <personChangeEditChildrenTable
          :key="timer"
          ref="chil"
          :tab-pane="activeName"
          :tree-data="treeData"
          @handleDeleteCallback="handleDeleteCallback"
          @revokeEditCallback="revokeEditCallback"
          @revokeInDeleteCallback="revokeInDeleteCallback"
          @revokeInCallback="revokeInCallback"
          @handleInCallback="handleInCallback"
          @revokeOutCallback="revokeOutCallback"
          @revokeVerifyCallback="revokeVerifyCallback"
          @verifyCallback="verifyCallback"
          @salaryStateCallback="salaryStateCallback"
        />
      </div>
      <Drag ref="icon" />
    </div>
  </div>
</template>

<script>
import personChangeEditChildrenTable from '@/views/personInfoMaintenance/children/personChangeEditChildren'
import AgencyTree from '@/components/tree/agencyTree'
import Drag from '@/components/Drag'
export default {
  name: 'ComplexTable',
  components: { Drag, AgencyTree, personChangeEditChildrenTable },
  data() {
    return {
      allimgSrc: require('@/assets/images/whiteall.png'),
      Untreatedimg: require('@/assets/images/blueselect.png'),
      Processedimg: require('@/assets/images/processed.png'),
      Backimg: require('@/assets/images/blueselect.png'),
      timer: '',
      activeName: 'all',
      inLoading: false, // 调入
      verifyLoading: false, // 送审
      revokeVerifyLoading: false, // 撤销送审
      revokeOutLoading: false, // 撤销调出
      revokeInLoading: false, // 撤销调入
      revokeReductionLoading: false, // 撤销消减
      revokeEditLoading: false, // 撤销修改
      deleteLoading: false, // 删除
      treeShow: false,
      isActive: true,
      treeHeight: null,
      Show: false,
      treeData: ''
    }
  },
  watch: {
    activeName(val) {
      this.timer = new Date().getTime()
      if (val === 'all') {
        this.allimgSrc = require('@/assets/images/whiteall.png')
        this.Processedimg = require('@/assets/images/processed.png')
        this.Untreatedimg = require('@/assets/images/blueselect.png')
        this.Backimg = require('@/assets/images/blueselect.png')
      } else if (val === '0') {
        this.allimgSrc = require('@/assets/images/all.svg')
        this.Processedimg = require('@/assets/images/processed.png')
        this.Untreatedimg = require('@/assets/images/select.png')
        this.Backimg = require('@/assets/images/blueselect.png')
      } else if (val === '1') {
        this.allimgSrc = require('@/assets/images/all.png')
        this.Processedimg = require('@/assets/images/blue.png')
        this.Untreatedimg = require('@/assets/images/blueselect.png')
        this.Backimg = require('@/assets/images/blueselect.png')
      } else {
        this.allimgSrc = require('@/assets/images/all.png')
        this.Processedimg = require('@/assets/images/processed.png')
        this.Untreatedimg = require('@/assets/images/blueselect.png')
        this.Backimg = require('@/assets/images/select.png')
      }
    }
  },
  created() {},
  mounted() {
    this.dragController()
    this.getTeHeight()
  },
  beforeMount() {
    window.addEventListener('resize', this.getTeHeight)
  },
  methods: {
    getFirstAuthAgencyData(data) {
      this.treeData = data
    },
    getTeHeight() {
      this.treeHeight = window.innerHeight - 240
    },
    // 查询
    Query() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.$refs.chil.query()
      }
    },
    exportTemplate() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.$refs.chil.exportTemplate()
      }
    },
    importFile() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.$refs.chil.importFile()
      }
    },
    // 新增
    handleAdd() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.$refs.chil.handleAdd()
      }
    },
    // 送审
    submitVerify() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.verifyLoading = true
        this.$refs.chil.submitVerify()
      }
    },
    // 送审回调
    verifyCallback() {
      this.verifyLoading = !this.verifyLoading
    },
    // 撤销审核
    revokeVerify() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.revokeVerifyLoading = true
        this.$refs.chil.revokeVerify()
      }
    },
    // 撤销审核回调
    revokeVerifyCallback() {
      this.revokeVerifyLoading = !this.revokeVerifyLoading
    },
    // 调出
    handleOut() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.$refs.chil.handleOut()
      }
    },
    // 撤销调出
    revokeOut() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.revokeOutLoading = true
        this.$refs.chil.revokeOut()
      }
    },
    // 撤销调出回调
    revokeOutCallback() {
      this.revokeOutLoading = !this.revokeOutLoading
    },
    // 调入
    handleIn() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.inLoading = true
        this.$refs.chil.handleIn()
      }
    },
    // 调入回调
    handleInCallback() {
      this.inLoading = false
    },
    // 撤销调入
    revokeIn() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.revokeInLoading = true
        this.$refs.chil.revokeIn()
      }
    },
    // 撤销调入回调
    revokeInCallback() {
      this.revokeInLoading = !this.revokeInLoading
    },
    // 消减
    handleReduction() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.$refs.chil.handleReduction()
      }
    },
    // 撤销消减
    revokeInDelete() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.revokeReductionLoading = true
        this.$refs.chil.revokeInDelete()
      }
    },
    // 撤销消减回调
    revokeInDeleteCallback() {
      this.revokeReductionLoading = !this.revokeReductionLoading
    },
    // 修改
    handleEdit() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.$refs.chil.handleEdit()
      }
    },
    // 撤销修改
    revokeEdit() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.revokeEditLoading = true
        this.$refs.chil.revokeEdit()
      }
    },
    // 撤销修改回调
    revokeEditCallback() {
      this.revokeEditLoading = !this.revokeEditLoading
    },
    // 删除
    handleDelete() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.deleteLoading = true
        this.$refs.chil.handleDelete()
      }
    },
    // 删除回调
    handleDeleteCallback() {
      this.deleteLoading = !this.deleteLoading
    },
    // 打开附件
    appendixOpen() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.$refs.chil.appendixOpen()
      }
    },
    // 导出
    outPutFile() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.$refs.chil.outPutFile()
      }
    },
    // 工资编报状态提示
    salaryStateCallback() {
      this.$message({
        showClose: true,
        message: '工资编报已送审，不能操作',
        type: 'warning',
        duration: 4000
      })
    },
    toggerTree() {
      this.treeShow = !this.treeShow
      this.isActive = !this.isActive
      this.Show = !this.Show
    },
    handleTreeQuery(data) {
      if (data && data.isleaf === '1') {
        this.treeData = data
      }
    },
    dragController() {
      this.$refs.icon.dragControllerDiv()
    }
  }
}
</script>
<style  lang="scss" scoped>
@import "~@/styles/border.scss"; /*引入公共样式*/

.app-title {
  margin-bottom: 15px;
  height: 20px;
  border-bottom: 1px solid #dcdfe6;
}
</style>
